<!--
来源：
https://www.bilibili.com/video/BV1BK4y1G7bF
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="forget.png" type="image/x-icon" />
    <title>忘记密码</title>


    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <script type="text/javascript">
        function randoms() {
            document.getElementById("id").value = "";
            document.getElementById("phone").value = "";
            document.getElementById("email").value = "";
            document.getElementById("repassword").value = "";
            document.getElementById("password").value = "";
        }

        //参考链接：https://www.runoob.com/try/try.php?filename=jquery_validate_demo1

        //添加检测机制 参考链接：https://blog.csdn.net/huangleijay/article/details/11569317
        jQuery.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile = /^(((13)|1[5-9]{1})+\d{9})$/
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");

        // 字母和数字的验证
        jQuery.validator.addMethod("chrnum", function (value, element) {
            var chrnum = /^([a-zA-Z0-9]+)$/;
            return this.optional(element) || (chrnum.test(value));
        }, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

        //下面是表单拦截提示，可取消，否则无法跳转
        /*
        $.validator.setDefaults({
            submitHandler: function() {
                //alert("提交事件!");
            }
        });*/
        $().ready(function () {
            // 在键盘按下并释放及提交后验证提交表单
            $("#forgetform").validate({
                rules: {
                    //密码是6位以上
                    password: {
                        required: true,
                        minlength: 6,
                        maxlength: 10,
                        chrnum: true
                    },
                    //验证密码
                    repassword: {
                        required: true,
                        chrnum: true,
                        equalTo: "#password"
                    },
                    //手机号
                    phone: {
                        required: true,
                        mobile: true
                    },
                },
                messages: {
                    password: {
                        required: "请输入密码",
                        minlength: "请输入6~10位密码",
                        maxlength: "请输入6~10位密码"
                    },
                    repassword: {
                        required: "请输入密码",
                        equalTo: "两次密码输入不一致"
                    },
                    phone:
                    {
                        required: "请输入一个正确的手机号"
                    }
                }
            });
        });

    </script>
    <style>
        .error {
            color: red;
        }
    </style>

</head>

<body onload="randoms()">
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>忘记密码</h2>
                    <form id="forgetform" action="forget.php" method="post" name="form">
                        <div class="inputBox">
                            <input type="text" placeholder="账户" name="id" id="id">

                        </div>

                        <div class="inputBox">
                            <input type="text" placeholder="邮箱" name="email" id="email">

                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="手机号" name="phone" id="phone">

                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="请输入6~10位密码" name="password" id="password">

                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="再次输入密码" name="repassword" id="repassword">

                        </div>
                        <div class="inputBox">
                            <input type="submit" value="修改">

                        </div>
                        <p class="forget">已有账户?<a href="login.html">
                                点击登录
                            </a></p>
                        <p class="forget">没有账户?<a href="register.html">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>

</html>